<template>
  <el-row class="container" type="flex" justify="space-between">
    <!-- 文章主体区域 -->
    <postDetailsMain
      :data="item"
      v-for="item in postDetailsList"
      :key="item.id"
    />

    <!-- 文章右侧区域 -->
    <postDetailsRight @getPost="getPost" />
  </el-row>
</template>

<script>
import postDetailsMain from "../../components/post/postDetailsMain";
import postDetailsRight from "../../components/post/postDetailsRight";
export default {
  components: {
    postDetailsMain,
    postDetailsRight
  },
  data() {
    return {
      postDetailsList: {}
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      // console.log(this.$route.query);
      this.$axios({
        url: "/posts",
        params: this.$route.query
      }).then(res => {
        this.postDetailsList = { ...res.data.data };
        console.log(this.postDetailsList);
      });
    },
    getPost(id) {
      this.getData();
    }
  }
};
</script>
<style lang="less" scoped>
.container {
  width: 1000px;
  margin: 0 auto;
  padding-top: 20px;
}
</style>
